<!DOCTYPE html>
<html lang="en">
<head>
  <title>dynamic content demo</title>  

  <link rel="stylesheet" type="text/css" href="css/main.css" />  
  <script  src="js/jquery.js"></script>
    <script  src="../../colResizable-1.6.js"></script>
  <script type="text/javascript">
	$(function(){	


        var applyColresizable = function(){

            $("#dynamicTable").colResizable({
                liveDrag:true, 
                gripInnerHtml:"<div class='grip'></div>", 
                draggingClass:"dragging", 
                resizeMode:'fit'
            });
        }
        
        
        $("#addColumn").click(function(){
            //first disable colResizable always before any DOM manipulation
            $("#dynamicTable").colResizable({disable:true});
            //add a column (you can do it as you want, this is just an example)
            var i = 0;
            var tr = $("#dynamicTable tr");
            for(i=0; i<tr.length; i++){
                var row = tr.eq(i);
                var cell = i ? $("<td/>") : $("<th/>");
                cell.html( i ? "cell" : "header");
                row.append(cell);
            };
            
            //since now we have more columns, lets share the table width proportionally
            var th = $("#dynamicTable th");
            th.width(100 / th.length + "%");
            //apply colResizable again to be able to drag columns
            applyColresizable();
        })
        
        
        $("#addRow").click(function(){
            //first disable colResizable always before any DOM manipulation
            $("#dynamicTable").colResizable({disable:true});
            //duplicate the las row
            var html = $("#dynamicTable tr:last").html();
            $("#dynamicTable").append("<tr>"+html+"</tr>");
            applyColresizable();
        })

        applyColresizable();
        
      });	
      
      
      
  </script>
  
</head>
<body>
	<div class="center" >
	
        <h3>Dynamically generated content. (add/remove columns and rows)</h3>
        <br/>
    
		 <table id="dynamicTable" width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<th>header</th><th>header</th><th>header</th>
			</tr>
			<tr>
				<td >cell</td><td>cell</td><td >cell</td>
			</tr>
			<tr>
				<td >cell</td><td>cell</td><td >cell</td>
			</tr>
			<tr>
				<td >cell</td><td >cell</td><td >cell</td>
			</tr>																	
		</table>
        <br/>
        <button  id="addColumn">add column</button>
        <button  id="addRow">add row</button>

    
		<br/>


	</div>	
		

	
		
 </body>
 </html>
